<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>成绩管理</title>
    <script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>

<form class="layui-form" style="padding: 10px;" id="fors">



    <div class="layui-inline">
        <label class="layui-form-label">系部名称</label>
        <div class="layui-input-inline">
            <select name="did" id="did" lay-filter="select" class="layui-input" lay-verify="required">
                <option value=""></option>
            </select>
        </div>


    </div>

    <div class="layui-inline">
        <label class="layui-form-label">专业名称</label>
        <div class="layui-input-inline">
            <select name="mid" id="mid" lay-filter="selMa" class="layui-input" lay-verify="required">
                <option value=""></option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">年级名称</label>
        <div class="layui-input-inline">
            <select name="gid" id="gid" lay-filter="selGr" class="layui-input" lay-verify="required">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">班级名称</label>
        <div class="layui-input-inline">
            <select name="classid" id="classid" lay-filter="selCl" class="layui-input" lay-verify="required">
                <option value=""></option>
            </select>
        </div>
    </div>
</form>
<!--添加成绩的弹出层-->
<div style="display: none;padding: 20px" id="saveOrAddDiv" >
    <form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
        <input type="text" name="sid"  id="sid" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" style="display: none">
        <input type="text" name="scid" id="scid" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="sname" id="sname"  lay-verify="required" readonly="true" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>


            <label class="layui-form-label">科目</label>
            <div class="layui-input-inline">
                <input type="text" name="cname"  lay-verify="required" readonly="true" placeholder="请输入" autocomplete="off" class="layui-input">

        </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">平时成绩</label>
            <div class="layui-input-inline">
                <input type="text" name="normalexam" id="normalexam"  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">考试成绩</label>
            <div class="layui-input-inline">
                <input type="text" name="testexam" id="testexam"  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">综合成绩</label>
            <div class="layui-input-inline">
                <input type="text" name="sumexam" id="sumexam"  lay-verify="required" readonly="true" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">学期</label>
            <div class="layui-input-inline">
            <select name="stime" id="stime"  lay-verify="required">
                <option value="1">大一上学期</option>
                <option value="2">大一下学期</option>
                <option value="3">大二上学期</option>
                <option value="4">大二下学期</option>
                <option value="5">大三上学期</option>
                <option value="6">大三下学期</option>
            </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline" style="margin-left: 200px;margin-top: 50px">
                <button type="button" class="layui-btn layui-btn-primary" lay-filter="formDemo" lay-submit>提交</button>
            </div>
            <div class="layui-input-inline" style="margin-top: 50px">
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</div>
<!-- 数据表格开始 -->
<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
<script>
    var tableIns;
    layui.use([ 'jquery', 'layer', 'form', 'table'], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var mainIndex;

        //渲染数据表格
        tableIns=table.render({
            elem: '#userTable'   //渲染的目标对象
            ,url:'selScs' //数据接口
            ,title: '选课表'//数据导出来的标题
            ,toolbar:"#userToolBar"   //表格的工具条
            ,cellMinWidth:200 //设置列的最小默认宽度
            ,page: 1  //是否启用分页, limits: [10, 20, 30]
            ,limits: [3, 10, 20]
            ,limit: 3//每页数据默认采用3
            ,cols: [
                [   //列表数据
                    {field:'classname', title:'班级名字',align:'center'}
                    ,{field:'sname', title:'学生名',align:'center'}
                    ,{field:'cname', title:'课程名',align:'center'}
                    ,{fixed: '', title:'操作',align:'center',width:'170',templet:function(data){
                        return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="add">录入成绩</a>'
                    }}
                ]
            ]
        })
        //监听行工具事件
        table.on('tool(userTable)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent == 'add'){
                openAdd(data);
            }
        });
        //添加
        //打开添加页面
        function openAdd(data){
                mainIndex=layer.open({
                    type:1,
                    title:'添加',
                    content:$("#saveOrAddDiv"),
                    area:['800px','350px'],
                    success:function(index){
                        form.val("dataFrm",data);
                        form.on('submit(formDemo)', function(){
                            var sid=$("#sid").val();
                            var scid=$("#scid").val();
                            var normalexam=$("#normalexam").val();
                            var testexam=$("#testexam").val();
                            var sumexam=$("#sumexam").val();
                            var stime=$("#stime").val();
                            $.post("/selmessage",{ sid:sid, scid:scid, normalexam:normalexam, testexam:testexam, sumexam:sumexam, stime:stime},function(res){
                                layer.msg(res)
                                window.setTimeout('window.location.href="/selstudentExam"',2000);
                            })
                        })
                        }

                });
        }
        $("#normalexam").on('blur',function () {
            var  nexamreg= /^(([^0][0-9]+|0)\.([0-9]{1,2})$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9]{1,2})$)|^(([1-9]+)$)/
            var normalexam=$("#normalexam").val();
            var testexam=$("#testexam").val();
            if(normalexam>100||normalexam<0){
                layer.msg("最低分为0，最高分为100");
                $("#normalexam").val("");
            }
            else if(!nexamreg.test(normalexam)&&normalexam!=""){
                layer.msg("只能为数字");
                $("#normalexam").val("");
            }
        })
        $("#testexam").on('blur',function () {
            var  texamreg= /^(([^0][0-9]+|0)\.([0-9]{1,2})$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9]{1,2})$)|^(([1-9]+)$)/
            var normalexam=$("#normalexam").val();
            var testexam=$("#testexam").val();
            if(testexam>100||testexam<0){
                alert("最低分为0，最高分为100")
                $("#testexam").val("");
            }
            else if(!texamreg.test(testexam)&&testexam!=""){
                layer.msg("只能为数字");
                $("#testexam").val("");
            }
          else  if (testexam=="") {
                $("#sumexam").val("")
            }
            else if(testexam!=""){$("#sumexam").val((parseFloat(normalexam)+parseFloat(testexam))/2);
            }
        })
        //渲染下拉框

        $.ajax({
            //要跳转的地址
            url: 'selDes',
            //数据类型
            dataType: 'json',

            //提交类型
            type: 'post',
            //查询成功后执行的方法

            success: function (data) {

                $.each(data, function (index, item) {
                    $('#did').append(new Option(item.dname, item.did));// 下拉菜单里添加元素

                });
                form.render();
            }

        });
        //监听系
        form.on("select(select)",function(obj){

            $('#mid').html("");
            $('#gid').html("");
            $('#classid').html("");
            var did=  $("#did").val();

            $.ajax({
                //要跳转的地址
                url: 'selMas',
                //数据类型
                data:{
                    did:did
                },
                dataType: 'json',
                //提交类型
                type: 'post',
                //查询成功后执行的方法

                success: function (obj) {
                    $.each(obj, function (index, item) {
                        $('#mid').append(new Option(item.mname,item.mid));// 下拉菜单里添加元素
                    });
                    form.render();

                    var mid=  $("#mid").val();
                    $.ajax({
                        //要跳转的地址
                        url: 'selGrs',
                        //数据类型
                        data:{
                            mid:mid
                        },
                        dataType: 'json',
                        //提交类型
                        type: 'post',
                        //查询成功后执行的方法

                        success: function (oba) {
                            $.each(oba, function (index, item) {
                                $('#gid').append(new Option(item.gname,item.gid));// 下拉菜单里添加元素
                            });
                            form.render();
                            var gid=  $("#gid").val();
                            $.ajax({
                                //要跳转的地址
                                url: 'selCls',
                                //数据类型
                                data:{
                                    gid:gid
                                },
                                dataType: 'json',
                                //提交类型
                                type: 'post',
                                //查询成功后执行的方法

                                success: function (objss) {
                                    $.each(objss, function (index, item) {
                                        $('#classid').append(new Option(item.classname,item.classid));// 下拉菜单里添加元素
                                    });
                                    form.render();
                                    var classid=$("#classid").val();
                                    tableIns.reload({
                                        url:"selScs?classid="+classid
                                    })
                                }
                            })
                        }
                    })

                }
            });

        });








        //-------------------------------以下是监听----------------------------------



        //监听专业
        form.on("select(selMa)",function(obj){

            $('#gid').html("");
            $('#classid').html("");
            var mid=  $("#mid").val();
            $.ajax({
                //要跳转的地址
                url: 'selGrs',
                //数据类型
                data:{
                    mid:mid
                },
                dataType: 'json',
                //提交类型
                type: 'post',
                //查询成功后执行的方法

                success: function (oba) {
                    $.each(oba, function (index, item) {
                        $('#gid').append(new Option(item.gname,item.gid));// 下拉菜单里添加元素
                    });
                    form.render();
                    var gid=  $("#gid").val();


                    $.ajax({
                        //要跳转的地址
                        url: 'selCls',
                        //数据类型
                        data:{
                            gid:gid
                        },
                        dataType: 'json',
                        //提交类型
                        type: 'post',
                        //查询成功后执行的方法

                        success: function (objss) {
                            $.each(objss, function (index, item) {
                                $('#classid').append(new Option(item.classname,item.classid));// 下拉菜单里添加元素
                            });
                            form.render();
                            var classid=$("#classid").val();
                            tableIns.reload({
                                url:"selScs?classid="+classid
                            })
                        }
                    })
                }
            })
        });
        //监听年级
        form.on("select(selGr)",function(obj){
            $('#classid').html("");
            var gid=  $("#gid").val();
            $.ajax({
                //要跳转的地址
                url: 'selCls',
                //数据类型
                data:{
                    gid:gid
                },
                dataType: 'json',
                //提交类型
                type: 'post',
                //查询成功后执行的方法

                success: function (objss) {
                    $.each(objss, function (index, item) {
                        $('#classid').append(new Option(item.classname,item.classid));// 下拉菜单里添加元素
                    });
                    form.render();
                    var classid=$("#classid").val();
                    tableIns.reload({
                        url:"selScs?classid="+classid
                    })
                }
            })
        });
        //监听班级
        form.on("select(selCl)",function(obj){
            var classid=$("#classid").val();
            tableIns.reload({
                url:"selScs?classid="+classid
            })

        });
    });
</script>
</body>
</html>